<!--
 * @description: 
 * @Author: vikingShip
 * @Date: 2021-12-29 17:16:26
 * @LastEditors: latiao
 * @LastEditTime: 2022-08-11 18:02:42
-->
<template>
    <view>
        <view class="edit">
            <view class="edit__avator">
                <u--image
                    @click="showAvatarType=true"
                    width="85px"
                    height="85px"
                    :src="userInfo.avatarUrl"
                    shape="circle"
                    >
                </u--image>
            </view>
            <view class="edit__row--gray"></view>
        <u-cell-group :border="false">
            <u-cell size="large" title="昵称">
                <u-input slot="value" v-model="userInfo.nikeName" maxlength="16" inputAlign="right" border="none"></u-input>
            </u-cell>
            <u-cell size="large" title="性别" @click="sexShowType=true">
            <view slot="value">{{sexColums[0][userInfo.gender]}}</view>
            </u-cell>
            <u-cell size="large" title="退出登录" @click="logout">
                <u-icon name="arrow-right" slot="value"></u-icon>
            </u-cell>
        </u-cell-group>
        <view class="avatar__list--confirm" @click="saveUserInfo">保存</view>
        <u-picker :show="sexShowType" :columns="sexColums" @confirm="sexConfirm" @cancel="sexShowType=false"></u-picker>
        </view>
        <!-- 头像选择弹窗 -->
        <u-popup :show="showAvatarType" mode="bottom" @close="showAvatarType=false">
            <view class="avatar__list">
                <view 
                    v-for="(item,index) in useAvatorList" 
                    :key="item" 
                    style="margin-right:2px;" 
                    :class="[isChoosed===index?'avatar__list--pick':'avatar__list--option']"
                    @click="isChoosed=index"
                >
                    <u--image
                        width="170rpx"
                        height="170rpx"
                        :src="item"
                        shape="circle"
                        >
                    </u--image>
                </view>
            </view>
            <view class="avatar__list--confirm" @click="confirmAvatar">确认</view>
            <view class="tip">头像出处为恐羽症患者</view>
        </u-popup>
    </view>
    
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import {getAvatorList,saveUserInfo} from '@/api/modules/user'
import storage from "@/utils/storage";
@Component
export default class UserInfo extends Vue {
    sexShowType=false
    showAvatarType=false
    sexColums=[['无','男','女']]
    useAvatorList=[]
    userInfo={
        avatarUrl:"",
        gender:0,
        nikeName:""
    }
    isChoosed=-1
    created(){
        getAvatorList().then(res=>{
            this.useAvatorList=res
            const tempArr=this.filterAvatarIndex(res,this.$store.state.userStore.userInfo.avatarUrl)
            this.isChoosed=tempArr.length>0?tempArr[0]:-1
        }).catch(()=>{
            this.$Popup.toast("获取头像列表失败")
        })
        this.userInfo={...this.$store.state.userStore.userInfo}
    }
    /**
     * @LastEditors: vikingShip
     * @description: 性别选择弹窗设置
     */    
    sexConfirm(e){
        this.userInfo.gender=e.indexs[0]
        this.sexShowType=false
    }

    /**
     * @LastEditors: vikingShip
     * @description: 头像选择确认
     */    
    confirmAvatar(){
        const chooseIndex=this.isChoosed;
        const avatarList=this.useAvatorList;
        const userInfo=this.userInfo;
        userInfo.avatarUrl=avatarList[chooseIndex]
        this.showAvatarType=false
    }
    /**
     * @LastEditors: vikingShip
     * @description: 保存用户信息
     */    
    saveUserInfo(){
        const {nikeName,gender} =this.userInfo
        if(this.isChoosed==-1){
            this.$Popup.toast("请选择头像")
            return
        }
        saveUserInfo({
            nickname:nikeName,
            gender,
            avatar:this.isChoosed
        }).then((res)=>{
            this.$Popup.toast("保存成功")     
            this.userInfo.token=res.token.token
            storage.set("getLoginData", this.userInfo, 3 * 24 * 60 * 60 * 1000);
            this.$store.commit("userStore/setUserInfo",this.userInfo)
            uni.navigateBack({
                delta:2
            }) 
        })
    }
    /**
     * @LastEditors: vikingShip
     * @description: 退出登录
     * @param {*}
     * @returns {*}
     */    
    logout(){
        this.$Popup.modal({
            title:"提示",
            content:"确定需要退出？"
        }).then(()=>{
            this.$store.dispatch("userStore/deleteToken")
            this.$store.dispatch("settingStore/backHome")
        })

    }
    /**
     * @LastEditors: vikingShip
     * @description: 筛选初始化下标
     */ 
    filterAvatarIndex(arr,url:string):Array<number>{
       return arr.map((item,index)=>{
            if(item===url){
               return index
            }
        }).filter(Boolean)
    }   
}
</script>
<style lang="scss" scoped>
    page{
        background: #fff;
    }
    @include b(edit){
        @include e(avator) {
          width:100%;
          height:250rpx;
          @include flex();
        }
        @include e(info) {
        //   height:calc(100vh - 450rpx);
            @include m(flex) {
              @include flex(space-between);
              font-size: 28rpx;
              height: 120rpx;
            }
        }
        @include e(row) {
          @include m(gray){
              background: rgba($color: #ccc, $alpha: .2);
              height: 20rpx;
              width: 100%;
          }
        }
    }
    @include b(avatar) {
        @include e(list){
            box-sizing: border-box;
            width: 100%;
            height: 600rpx;
            padding: 20rpx;
            @include flex(flex-start);
            flex-wrap: wrap;
            @include m(pick) {
              opacity: 1;
            }
            @include m(option){
              opacity: 0.3;
            }
            @include m(confirm) {
              margin:20rpx auto;
              width:500rpx;
              height:80rpx;
              line-height: 80rpx;
              text-align: center;
              font-size: 26rpx;
              background: #fe4e63;
              color: #fff;
              font-weight: bold;
              border-radius: 40rpx;
            }
        }
    }
    .tip{
        color: #ccc;
        font-size: 20rpx;
        margin: 0 auto;
        color: rgb(34, 114, 151);
    }
</style>